<template>
    <div class="detail-container" v-loading="loading">
        <div style="position: absolute;top:200px;left:50%;z-index:99" v-if="orderInfo.orderState == 10">
            <img :src="zhoufei" />
        </div>
        <div style="position: absolute;top:200px;left:250px;z-index:99" v-if="orderInfo.activityType == 'paiMai'">
          <img src="https://pic.moresu.com/FoLUFEezn2bbN7xNd4iaiKHNwpQM" />
        </div>
        <div style="position: absolute;top:200px;left:250px;z-index:99" v-if="orderInfo.activityType == 'seckill'">
          <img src="https://pic.moresu.com/FvTqdZI0-8JbMLVmy7zYyTU69S94" />
        </div>
        <el-card shadow="never" style="margin-top: 15px;position: relative">

            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前合同流转状态：{{orderInfo.orderStateStr}}</span>
                <span style="font-size: 16px;color: rgb(0, 140, 216);padding-left: 49px; font-weight: bold;">金蝶更新日期：{{orderInfo.kingUpdateTime}}</span>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
                <img src="../../assets/images/yue2.png" v-if="orderInfo.isTimeSure==1" style="position: absolute;left: 10px;top: 57px;z-index: 5;"/>
              <el-form  size="mini" label-width="150px" class="minRoW" :rules="rules">
                <el-row>
                <el-col :span="8">
                            <el-form-item label="订单编号：">{{orderInfo.orderSn}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="摩塑网订单号：">{{orderInfo.moresuSn}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="下单日期：">{{orderInfo.createTime}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单数量：">{{orderInfo.orderGoodsNumber}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单金额：">{{orderInfo.orderAmount}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="业务员：">{{orderInfo.userName}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="物流方式：">{{orderInfo.sendType}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同公司：">
                                {{orderInfo.fromCompany}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同截止付款时间：">
                                    <el-date-picker
                                            :disabled="(orderInfo.orderState != 40 && orderInfo.orderState != 0 )|| orderInfo.isCanChangeOtherRemark == 0"
                                            style="width:180px;display: inline-block"
                                            v-model="orderInfo.expectPayTime"
                                            type="datetime"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            :picker-options="pickerOptions1"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                    <el-button v-if="orderInfo.isCanChangeOtherRemark == 1 && (orderInfo.orderState == 40 || orderInfo.orderState == 0)" @click="submitContractOtherRemark" style="display: inline-block">修改</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="结算方式：">{{orderInfo.orderRemark}}</el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="合同其它备注：">
                                <el-input v-model="orderInfo.contractOtherRemark" :disabled="orderInfo.isCanChangeOtherRemark == 0" style="width:calc(100% - 100px)" ></el-input>
                                <el-button v-if="orderInfo.isCanChangeOtherRemark == 1 && (orderInfo.orderState == 40 || orderInfo.orderState == 0)" @click="submitContractOtherRemark">修改备注</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="明确合同约定时间：" v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 0)" prop="isTimeSure">
                                <el-radio-group v-model="orderInfo.isTimeSure">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="明确合同约定时间：" v-else>
                                <span :style="{color:orderInfo.isTimeSure==1 ? 'red' : ''}"> {{orderInfo.isTimeSure | fifterTimeSure}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="财务状态：">{{orderInfo.financeState | fiffinanceState}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="财务操作时间：">{{orderInfo.financeTime}}</el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单来源：">
                                <span style="color:red">
                                     {{orderInfo.isMoresuOnlineOrder == 1 ? '推广订单' : '销售订单'}}
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="orderInfo.isMoresuOnlineOrder == 1">
                            <el-form-item label="推广订单是否需要审核：" >
                                {{orderInfo.isMoresuNeedCheck == 1 ? '是' : '否'}}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 0 || orderInfo.orderState == 30)">
                            <el-form-item label="发票是否开明细：" >
                                    <el-radio-group v-model="orderInfo.isInvoiceNeedDetail">
                                        <el-radio :label="1">是</el-radio>
                                        <el-radio :label="0">否</el-radio>
                                    </el-radio-group>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-else>
                            <el-form-item label="发票是否开明细：" >
                                {{orderInfo.isInvoiceNeedDetail == 1 ? '是' : orderInfo.isInvoiceNeedDetail == 0 ? '否' : ''}}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 0)">
                            <el-form-item label="是否为维护合同：" >
                                <el-radio-group v-model="orderInfo.isDefendOrder">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-else>
                            <el-form-item label="是否为维护合同：" >
                                <span style="font-size:18px;font-weight: bold;color:red" v-if="orderInfo.isDefendOrder == 1">是</span>
                                <span v-else>否</span>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="8" >
                        <el-form-item label="推荐人：" >
                          {{ orderInfo.introduceName}}<span v-if="orderInfo.introduceMobile != ''">（{{orderInfo.introduceMobile}}）</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="支付方式：" >
                          {{ orderInfo.transactionType}} <span v-if="orderInfo.transactionType == '帐期'">{{orderInfo.periodDay}}天</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="是否为特殊订单：" >
                          {{ orderInfo.isZ == 1 ? '是' : '否'}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" >
                        <el-form-item label="订单分类：" >
                          {{ orderInfo.orderCustomerType}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="是否分批来款，分批发货：" label-width="166px">
                            {{orderInfo.isBatchPaid == 1 ? '是' : '否'}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8" >
                        <el-form-item label="是否意向合同：" label-width="166px">
                          {{orderInfo.isIntentionOrder == 1 ? '是' : '否'}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" >
                        <el-form-item label="是否后结算：" label-width="166px">
                          {{orderInfo.isDelaySettleOrder == 1 ? '是' : '否'}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                </el-form>
            </el-card>


                <div style="margin-top: 20px">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">客户信息</span>
                </div>
                <el-card shadow="never" style="margin-top: 15px;position: relative">
                    <el-form  size="mini" label-width="120px" class="minRoW">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="客户编号：">
                                    <el-link type="primary" @click="toDetail" style="cursor: pointer">
                                        {{orderInfo.customerNumber }}
                                    </el-link>
                                    <span v-if="orderInfo.isPa6Used==1" class="title-tab">PA6</span>
                                    <span v-if="orderInfo.isPa66Used==1" class="title-tab">PA66</span>
                                    <span v-if="orderInfo.isPcUsed==1" class="title-tab">PC</span>
                                    <span v-if="orderInfo.isAbsUsed==1" class="title-tab">ABS</span>
                                    <span v-if="orderInfo.isOtherUsed==1" class="title-tab">其它</span>
                                    <span v-if="orderInfo.hasAgreement == 1" class="title-tab" style="color:#fff;background: rgb(249, 177, 73);cursor: pointer" @click="toDetail('10')">质</span>
                                    <span style="font-size: 12px;vertical-align: middle;display: inline-block;margin-left: 15px;color: #409eff;background: #ecf5ff;border: 1px solid #b3d8ff;height: 24px;line-height: 24px;padding: 0 10px; border-radius: 5px;cursor: pointer" @click="toDetail">
                                    {{orderInfo.customerGrade}}
                                </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-if="orderInfo.isShowCustomerName">
                          <el-col :span="24">
                            <el-form-item label="客户名称：">
                                {{orderInfo.customerName }}
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24">
                            <el-form-item label="客户标签：">
                              <crm-tag :item="item" v-for="item in orderInfo.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="历史成交数据：" >
                                    <div style="line-height: 16px;padding-top:5px">{{orderInfo.successNumStatistics}}</div>
                                    <div style="line-height: 16px">{{orderInfo.lastOrderMsg}}</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="采购评级：" >
                                    <div style="line-height: 16px;padding-top:5px">{{orderInfo.customerLabel}}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户行业：">
                                    <el-select v-model="orderInfo.customerIndustry.cdd_id" v-if="orderInfo.customerIndustry" :disabled="type == 'see' || (orderInfo.orderState != 0 && orderInfo.orderState != 30)">
                                        <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerIndustryList"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="合同类型：">
                                    {{orderInfo.orderType | fifterOrderType}}
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-card>


            <el-row :gutter="20" style="margin-top:20px">
                <el-col :span="12">
                    <el-card class="box-card" shadow="never" style="height:300px">
                        <div slot="header" class="clearfix">
                            <span>收货信息</span>
                        </div>
                        <el-form  size="mini" label-width="120px" class="minRoW">
                            <el-form-item label="收货人：">{{orderInfo.receiverName}}</el-form-item>
                            <el-form-item label="收货人手机号：">{{orderInfo.receiverMobile}}</el-form-item>
                            <el-form-item label="展示地址：">{{orderInfo.addressInfo}}</el-form-item>
                            <el-form-item label="真实地址："><span style="color:red">{{orderInfo.actualAddressInfo}}</span></el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card" shadow="never" style="height:300px">
                        <div slot="header" class="clearfix">
                            <span>未关闭订单</span>
                        </div>
                        <el-table
                                height="200"
                                ref="orderItemTable"
                                :data="orderInfo.unCloseOrderList"
                                style="width: 100%" border>
                            <el-table-column label="订单号" align="center" width="180">
                                <template slot-scope="scope">
                                    <el-link @click="toOrderDetail(scope.row)" type="primary"  style="font-size:12px">
                                        {{scope.row.orderSn}}
                                    </el-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="订单时间" align="center" width="180">
                                <template slot-scope="scope">
                                    {{scope.row.orderTime}}
                                </template>
                            </el-table-column>
                            <el-table-column label="未发货数量" align="center" width="180">
                                <template slot-scope="scope">
                                    {{scope.row.unSendNum}}
                                </template>
                            </el-table-column>
                            <el-table-column label="付款状态" align="center" width="180">
                                <template slot-scope="scope">
                                    {{scope.row.payState}}
                                </template>
                            </el-table-column>
                            <el-table-column label="合同上传状态" align="center" width="180">
                                <template slot-scope="scope">
                                    {{scope.row. isHasContract}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>

            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">客户信用</span>
            </div>

            <table cellspacing="0" cellpadding="0" style="width:100%;margin-top:10px" class="tongJitable" v-if="orderInfo.orderStatistics">
                <tr>
                    <td rowspan="4" class="bgtd" align="center">
                        <div style="font-weight:bold;font-size:16px;margin-bottom:5px;">
                            <el-link @click="toSaleList('orders')" type="primary" style="font-weight:bold;font-size:16px;">
                                {{orderInfo.orderStatistics.orders}}
                            </el-link>
                        </div>
                        合同总数
                    </td>
                    <td class="bgtd"><div class="tddiv blurth">取消总数</div></td>
                    <td class="bgtd"><div class="tddiv">当日取消数</div></td>
                    <td class="bgtd"><div class="tddiv">2日内取消数</div></td>
                    <td class="bgtd"><div class="tddiv">3-7天内取消数</div></td>
                    <td class="bgtd"><div class="tddiv">7天以上取消数</div></td>
                    <td class="bgtd"><div class="tddiv blurth">降价原因取消数</div></td>
                    <td class="bgtd"><div class="tddiv">我司原因取消数</div></td>
                    <td class="bgtd"><div class="tddiv">其它原因取消数</div></td>
                </tr>
                <tr>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelAll')" type="primary" >
                                {{orderInfo.orderStatistics.cancelAll}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelToDay')" type="primary" >
                                {{orderInfo.orderStatistics.cancelToDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelTwoDay')" type="primary" >
                                {{orderInfo.orderStatistics.cancelTwoDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelWeek')" type="primary" >
                                {{orderInfo.orderStatistics.cancelWeek}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelThanWeek')" type="primary" >
                                {{orderInfo.orderStatistics.cancelThanWeek}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelByPriceReduction')" type="primary" >
                                {{orderInfo.orderStatistics.cancelByPriceReduction}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelByWeCompanyReason')" type="primary" >
                                {{orderInfo.orderStatistics.cancelByWeCompanyReason}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('cancelByOtherReason')" type="primary" >
                                {{orderInfo.orderStatistics.cancelByOtherReason}}
                            </el-link>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="bgtd"><div class="tddiv">总付款数</div></td>
                    <td class="bgtd"><div class="tddiv">履约付款数</div></td>
                    <td class="bgtd"><div class="tddiv">超1天付款数</div></td>
                    <td class="bgtd"><div class="tddiv">超2天付款数</div></td>
                    <td class="bgtd"><div class="tddiv">超3天付款数</div></td>
                    <td class="bgtd"><div class="tddiv">未付款数</div></td>
                    <td class="bgtd"><div class="tddiv">--</div></td>
                    <td class="bgtd"><div class="tddiv">--</div></td>
                </tr>
                <tr>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payAll')" type="primary" >
                                {{orderInfo.orderStatistics.payAll}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payToDay')" type="primary" >
                                {{orderInfo.orderStatistics.payToDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payOneDay')" type="primary" >
                                {{orderInfo.orderStatistics.payOneDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payTwoDay')" type="primary" >
                                {{orderInfo.orderStatistics.payTwoDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payThreeDay')" type="primary" >
                                {{orderInfo.orderStatistics.payThreeDay}}
                            </el-link>
                        </div>
                    </td>
                    <td>
                        <div class="tddiv">
                            <el-link @click="toSaleList('payNo')" type="primary" >
                                {{orderInfo.orderStatistics.payNo}}
                            </el-link>
                        </div>
                    </td>
                    <td><div class="tddiv">--</div></td>
                    <td><div class="tddiv">--</div></td>
                </tr>
            </table>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">商品信息</span>
                <div style="display: inline-block" v-if="orderInfo.isNeedMyCheck && orderInfo.orderState == 0">
                </div>
                <span style="color:red;padding-left:10px;font-size:12px">摩叔运费（调整）：{{orderInfo.orderGoodsData | fiFreight}}</span>
                <span style="padding-left:10px;font-size:12px">摩叔运费：{{orderInfo.moresuFreight}}</span>
                <span style="margin-left:10px;color:red;font-size:16px;font-weight:bold;display: inline-block;border:1px solid red;padding:5px;" v-if="orderInfo.orderRemark && orderInfo.orderRemark.indexOf('货到付款')!= -1">注意：此合同申请货到付款!!!<span style="padding-left:10px">{{orderInfo.orderRemark}}</span></span>
                <span style="margin-left:10px;color:red;font-size:16px;font-weight:bold;display: inline-block;border:1px solid red;padding:5px;" v-else-if="orderInfo.orderRemark && orderInfo.orderRemark.indexOf('预付定金')!= -1">注意：此合同申请定金!!!<span style="padding-left:10px">{{orderInfo.orderRemark}}</span></span>
              <span style="margin-left:10px;color:red;font-size:16px;font-weight:bold;display: inline-block;border:1px solid red;padding:5px;" v-else><span style="padding-left:10px">{{orderInfo.orderRemark}}</span></span>
            </div>
            <el-form size="small" :rules="rules" :model="orderInfo" ref="orderInfo">
                <el-table
                        ref="orderItemTable"
                        :data="orderInfo.orderGoodsData"
                        style="width: 100%;margin-top: 20px" border>
                    <el-table-column label="商品名称" width="180" key="1">
                        <template slot-scope="scope">
                            {{scope.row.goodsName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="160" align="center" key="2">
                        <template slot-scope="scope">
                            <div style="padding:0px 0 5px 0 ">
                                <div style="font-weight: bold;line-height: 16px">￥{{scope.row.moresuPrice}}</div>
                                <div>{{scope.row.moresuWarehouse}}</div>
                            </div>
                            <div style="color:red;border-top:1px solid #eee;line-height: 16px; padding:5px 0 0 0">
                                <div style="font-weight: bold">￥{{scope.row.goodsPrice}}</div>
                                <div>合同单价</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="结算方式"  width="150" align="center" key="25">
                      <template slot-scope="scope">
                        {{scope.row.ospPayMethod}}
                      </template>
                    </el-table-column>
                    <el-table-column label="合同数量"
                                     width="100"  align="center" key="3">
                        <template slot-scope="scope">
                            {{scope.row.goodsNum}}{{scope.row.goodsUnit}}
                        </template>
                    </el-table-column>
                    <el-table-column label="已发货数量"
                                     width="100"  align="center" key="4">
                        <template slot-scope="scope">
                            {{scope.row.sendNum}}{{scope.row.goodsUnit}}
                        </template>
                    </el-table-column>
                    <el-table-column label="合同金额" width="100" align="center" key="5">
                        <template slot-scope="scope">
                            ￥{{scope.row.goodsAmount}}
                        </template>
                    </el-table-column>
                    <el-table-column label="杂费(装卸费)" width="80" align="center" key="6">
                        <template slot-scope="scope">
                            <span v-if="scope.row.consultation != ''">￥{{scope.row.consultation}}</span>
                            <span v-else> -- </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="摩叔运费" width="120" align="center" key="7">
                        <template slot-scope="scope">
                            <el-form-item :prop="`orderGoodsData.${scope.$index}.goodsFreight`" :rules="rules.goodsFreight" v-if="orderInfo.isNeedMyCheck && orderInfo.orderState == 0">
                                <el-input v-model="scope.row.goodsFreight"></el-input>
                            </el-form-item>
                            <div v-else>{{scope.row.goodsFreight}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="运联含税运费" width="120" align="center" label-class-name="blurth" key="8">
                        <template slot-scope="scope">
                            <div>{{scope.row.inputFreight}}</div>
                            <div v-if="scope.row.remark.indexOf('自提') == -1">{{scope.row.freightType | fifFreightType}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格类型" width="100" align="center" v-if="orderInfo.orderState != 0" key="9">
                        <template slot-scope="scope">
                            {{scope.row.priceType}}
                        </template>
                    </el-table-column>
                    <el-table-column label="预估毛利" width="80" align="center" v-if="orderInfo.orderState != 0" key="10">
                        <template slot-scope="scope">
                            <span style="color:red">{{scope.row.saleProfit}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="吨毛利" width="80" align="center" v-if="orderInfo.orderState != 0" key="11">
                        <template slot-scope="scope">
                            <span style="color:red">{{scope.row.perSaleProfit}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="转移吨毛利" width="90" align="center" v-if="orderInfo.orderState == 24" key="11">
                      <template slot-scope="scope">
                        <span style="color:red">{{scope.row.myMovePerProfit}}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="采购底价" width="100" align="center"  label-class-name="blurth" key="12">
                        <template slot-scope="scope">
                            <span v-if="scope.row.purchaseActualPrice != ''">￥{{scope.row.purchaseActualPrice}}</span>
                            <span v-else> -- </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货类型" width="120" align="center" v-if="orderInfo.orderState != 0" key="13">
                        <template slot-scope="scope">
                            {{scope.row.sendType}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发货仓库" width="100" align="center" v-if="orderInfo.orderState != 0" key="14">
                        <template slot-scope="scope">
                            {{scope.row.warehouseName}}
                        </template>
                    </el-table-column>

                    <el-table-column label="合同约定时间" width="180" align="center" label-class-name="blurth" key="19">
                        <template slot-scope="scope">
                            <el-form-item :prop="`orderGoodsData.${scope.$index}.timeSureDate`" :rules="rules.timeSureDate" v-if="(orderInfo.orderState == 0) && orderInfo.isTimeSure == 1 && orderInfo.isNeedMyCheck">
                                <el-date-picker
                                        v-model="scope.row.timeSureDate"
                                        value-format="yyyy-MM-dd"
                                        style="width:140px"
                                        type="date"
                                        placeholder="合同约定时间">
                                </el-date-picker>
                            </el-form-item>
                            <span v-else>
                                {{scope.row.timeSureDate}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预计发货日期" width="200" v-if="orderInfo.orderState != 0" key="20">
                        <template slot-scope="scope">
                                <div>预计发货日期：{{scope.row.sendDate1 ? scope.row.sendDate1 : '--'}} </div>
                                <div>预计发货概率：{{scope.row.sendRate1 ?  scope.row.sendRate1+'%' : '--'}}</div>
                        </template>
                    </el-table-column>
                  <el-table-column width="150" label="采购完成发货时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.endSendDate }}</span>
                    </template>
                  </el-table-column>
                    <el-table-column label="底色" v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck" width="200" align="center" key="21">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-select v-model="scope.row.goodsColor" size="small" clearable>
                                    <el-option value="蓝底透明" label="蓝底透明" key="1"></el-option>
                                    <el-option value="白底透明" label="白底透明" key="2"></el-option>
                                    <el-option value="黑底透明" label="黑底透明" key="3"></el-option>
                                    <el-option value="颜色备注" label="颜色备注" key="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>



                    <el-table-column label="备注" key="22" width="150">
                        <template slot-scope="scope">
                            {{scope.row.remark}}
                          <div>
                              <el-button style="margin-left:0" type="text" size="mini" @click="showRemark(scope.row)" v-if="changeOrderDetailRemark">修改备注并推送金蝶</el-button>
                          </div>
                        </template>
                    </el-table-column>

                  <el-table-column label="物流备注" key="freightRemark" width="150">
                    <template slot-scope="scope">
                      {{scope.row.freightRemark}}
                    </template>
                  </el-table-column>

                  <el-table-column label="期望发货日期" width="170" fixed="right" align="center" v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck" key="15">
                    <template slot-scope="scope">
                      <el-form-item style="display: inline-block" :prop="`orderGoodsData.${scope.$index}.expectSendDate`" :rules="rules.expectSendDate" v-if="scope.row.orderGoodsType!='onePriceOrder'">
                        <el-date-picker
                          @change="isImit(scope.row,scope.row.expectSendDate)"
                          v-model="scope.row.expectSendDate"
                          value-format="yyyy-MM-dd"
                          style="width:140px"
                          type="date"
                          placeholder="期望发货日期">
                        </el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="期望发货日期" width="100" align="center" v-else key="16" fixed="right">
                    <template slot-scope="scope">
                      <span>{{scope.row.expectSendDate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="发货紧急度" width="140" fixed="right" align="center" v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck" key="17">
                    <template slot-scope="scope">
                      <el-form-item :prop="`orderGoodsData.${scope.$index}.urgentType`" :rules="rules.urgentType" >
                        <el-select v-model="scope.row.urgentType" class="input-width" style="width:120px" placeholder="请选择" clearable>
                          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in urgentTypeList"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :prop="`orderGoodsData.${scope.$index}.urgentRemark`" :rules="rules.urgentRemark" v-if="scope.row.urgentType == 140">
                        <el-input v-model="scope.row.urgentRemark" placeholder="说明原因"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="发货紧急度" width="100" align="center" v-else key="18" fixed="right">
                    <template slot-scope="scope">
                      <div>{{scope.row.urgentTypeStr}}</div>
                      <div v-if="scope.row.urgentTypeStr == '必须'">{{scope.row.urgentRemark}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="从我司购买原因" key="24" width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-form-item :prop="`orderGoodsData.${scope.$index}.customerBuyReason`" :rules="rules.customerBuyReason"  v-if="(orderInfo.orderState == 0 || orderInfo.orderState == 30 ) && orderInfo.isNeedMyCheck">
                        <el-select v-model="scope.row.customerBuyReason" size="small" clearable>
                          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerBuyReasonList"></el-option>
                        </el-select>
                      </el-form-item>
                      <div v-else>{{scope.row.customerBuyReasonStr}}</div>
                    </template>
                  </el-table-column>

                  <el-table-column label="客户购买原因" key="23" width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-form-item :prop="`orderGoodsData.${scope.$index}.fromBuyReason`" :rules="rules.fromBuyReason"  v-if="(orderInfo.orderState == 0 || orderInfo.orderState == 30 ) && orderInfo.isNeedMyCheck">
                        <el-select v-model="scope.row.fromBuyReason" size="small" clearable>
                          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in fromBuyReasonList"></el-option>
                        </el-select>
                      </el-form-item>
                      <div v-else>{{scope.row.fromBuyReasonStr}}</div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-alert
                        style="margin-top:20px;"
                        :closable="false"
                        type="warning">
                    <template slot="title">
                        <div style="color:#606266">特殊需求</div>
                    </template>
                    <template>
                      <div v-if="orderInfo.orderState != 0" style="padding-bottom:10px;color:#606266;line-height: 22px">
                        <span style="padding-right:15px;white-space:nowrap;">是否工厂直发: <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.isFactoryDeliver == 1 ? '是' : orderInfo.isFactoryDeliver == 2 ?'否' : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">生产日期: <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.productionDate != '' ? orderInfo.productionDate : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">真空率(%): <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.packingRequire != '' ? orderInfo.packingRequire : '--'}}</span> </span>
                        <span style="padding-right:15px;white-space:nowrap;">破包率(%): <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.brokenRate != '' ? orderInfo.brokenRate : '--'}}</span> </span>
                        <span style="padding-right:15px;white-space:nowrap;">节假日是否收货: <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.isHolidayCanSend == 2 ? '周六周日都不收货' : orderInfo.isHolidayCanSend == 3 ?'周日不收货' : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">是否为同一批次产品: <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.batchRequire != '' ? orderInfo.batchRequire : '--' }}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">备注: <span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.buyerRemark ? orderInfo.buyerRemark : '--' }}</span></span>
                      </div>
                      <el-form v-if="orderInfo.isNeedMyCheck==1&&orderInfo.orderState==0"  :model="orderInfo" size="mini" label-width="110px">

                        <el-row>
                          <el-col :span="8">
                            <el-form-item label="是否工厂直发:">
                              <el-radio-group v-model="orderInfo.isFactoryDeliver">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="生产日期:">
                              <el-date-picker
                                v-model="orderInfo.productionDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                style="width: 180px;">
                              </el-date-picker>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="节假日是否收货:">
                              <el-radio-group v-model="orderInfo.isHolidayCanSend">
                                <el-radio :label="2">周六周日都不收货</el-radio>
                                <el-radio :label="3">周日不收货</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="是否为同一批次:">
                              <el-input v-model="orderInfo.batchRequire" clearable style="width: 180px;"></el-input>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="真空率(%):">
                              <el-input-number v-model="orderInfo.packingRequire" :min="0" :controls="false"></el-input-number>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="破包率(%):">
                              <el-input-number v-model="orderInfo.brokenRate" :min="0" :controls="false"></el-input-number>
                            </el-form-item>
                          </el-col>

                          <el-col :span="8">
                            <el-form-item label="备注:">
                              <el-input type="textarea" v-model="orderInfo.buyerRemark"></el-input>
                            </el-form-item>
                          </el-col>

                        </el-row>
                      </el-form>
                    </template>
                </el-alert>
                <div style="float: right;margin: 20px" class="price-block">
                    <div style="display: inline-block;">
                        <div class="lab">商品总额：</div><div class="text">￥{{orderInfo.orderGoodsAmount}}<span>(已优惠￥{{orderInfo.moresuCouponAmount}})</span></div>
                    </div>
                    <div style="display: inline-block;">
                        <div class="lab" style="width:60px" v-if="orderInfo.sendType == '供方承担运输费用' && orderInfo.moresuFreight == 0">免运费</div>
                        <div class="lab" style="width:60px">运费：</div><div class="text">￥{{orderInfo.orderShippingFee}}</div>
                    </div>
                    <div style="display: inline-block;font-size:16px;font-weight: bold;color:red">
                        <div class="lab" style="width:60px">实付：</div><div class="text">￥{{orderInfo.orderPayAmount}}</div>
                        <div class="lab" style="width:60px">未付：</div><div class="text">￥{{orderInfo.unPaidAmount}}</div>
                    </div>
                    <div style="display: inline-block;" v-if="orderInfo.orderState != 0">
                        <div class="lab" style="width:80px;padding-left:10px;">预估毛利:</div>
                        <div class="text">￥{{orderInfo.saleProfit}}</div>
                    </div>
                    <div style="display: inline-block;" v-if="orderInfo.orderState == 24">
                      <div class="lab" style="width:80px;padding-left:10px;">转移总毛利:</div>
                      <div class="text">￥{{orderInfo.moveAllProfit}}</div>
                    </div>
                </div>
                <div style="float:left;width:45%;margin-top:20px">
                    <el-form-item label="操作备注(回退时必填)" v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 0 || orderInfo.orderState == 12 || orderInfo.orderState == 24 || orderInfo.orderState == 30 || orderInfo.orderState == -30 )">
                        <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:100%" v-model.trim="saleRemark"></el-input>
                    </el-form-item>
                </div>
            </el-form>



            <!---优惠券--->
            <div style="margin-top: 20px;clear: both" v-if="moresuCouponInfo.length > 0">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">优惠券信息</span>
            </div>

            <el-table
                    v-if="moresuCouponInfo.length > 0"
                    ref="orderItemTable"
                    :data="moresuCouponInfo"
                    style="width:auto;min-width:830px;margin-top: 20px" border>
                <el-table-column label="券号"  width="150" align="center">
                    <template slot-scope="scope">
                            {{scope.row.couponSn}}
                    </template>
                </el-table-column>
                <el-table-column label="券名称" width="180" align="center">
                    <template slot-scope="scope">
                        {{scope.row.couponName}}
                    </template>
                </el-table-column>
                <el-table-column label="优惠金额"   width="100"  align="center">
                    <template slot-scope="scope">
                        {{scope.row.couponAmount}}/吨
                    </template>
                </el-table-column>
                <el-table-column label="起订量"   width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.limitWeight}}
                    </template>
                </el-table-column>
                <el-table-column label="有效期" width="250" align="center">
                    <template slot-scope="scope">
                        {{scope.row.startTime}} - {{scope.row.endTime}}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="scope">
                      已使用
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top: 20px;clear: both">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">发货信息</span>
            </div>
            <el-table
                    ref="orderItemTable"
                    :data="deliverForm.dgList"
                    style="width: 100%;margin-top: 20px" border>
                <el-table-column label="类型"  width="100" align="center">
                    <template slot-scope="scope">
                      <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.deliverType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发货单号" width="160" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" style="font-size:12px;vertical-align: middle" @click="toDeliverCon(scope.row)">
                                 {{scope.row.deliverSn}}
                        </el-link>
                        <img src="../../assets/images/zhuofei2.png" v-if="scope.row.isDelete == 1" style="vertical-align: middle;"/>
                    </template>
                </el-table-column>
                <el-table-column label="开票状态"  width="100" align="center">
                  <template slot-scope="scope">
                     {{scope.row.invoiceState}}
                  </template>
                </el-table-column>
                <el-table-column label="发货时间"   width="100"  align="center">
                    <template slot-scope="scope">
                      <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.shipTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品牌号"   width="200" align="center">
                    <template slot-scope="scope">
                      <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.goodsSn}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发货数量" width="100" align="center">
                    <template slot-scope="scope">
                        <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.shipNum }}</div>
                    </template>
                </el-table-column>
             <el-table-column label="发货批号" width="150" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.batchNo }}</span>
                 </template>
             </el-table-column>
              <el-table-column label="采购结算方式" width="150" align="center">
                <template slot-scope="scope">
                  <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.goodsPayMethod }}</span>
                </template>
              </el-table-column>
             <el-table-column label="合同单价" width="100" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.goodsPrice }}</span>
                 </template>
             </el-table-column>
             <el-table-column label="采购底价" width="150" align="center">
                 <template slot-scope="scope">
                     <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.purchaseRealPrice}}</div>
                 </template>
             </el-table-column>
             <el-table-column label="实际含税运费" width="100" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.goodsFreight}}</span>
                 </template>
             </el-table-column>
            <el-table-column label="运费承担" width="100" align="center">
                <template slot-scope="scope">
                  <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.freightType}}</span>
                </template>
            </el-table-column>
             <el-table-column label="杂费(装卸费)" width="100" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.consultation}}</span>
                 </template>
             </el-table-column>
             <el-table-column label="实际现金毛利" width="100" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.saleProfit}}</span>
                 </template>
             </el-table-column>
            <el-table-column label="销售发货毛利" width="100" align="center">
                <template slot-scope="scope">
                  <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}"> {{scope.row.saleSendProfit}}</span>
                </template>
            </el-table-column>
            <el-table-column label="销售发货吨毛利" width="120" align="center">
                <template slot-scope="scope">
                  <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.perSendProfit}}</span>
                </template>
            </el-table-column>
             <el-table-column label="合同分类" width="80" align="center">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}"> {{scope.row.orderType == 'normal' ? '正常' : '待定'}}</span>
                 </template>
             </el-table-column>
             <el-table-column label="状态" width="120" align="center">
                 <template slot-scope="scope">
                     <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.shipState}}</div>
                 </template>
             </el-table-column>
            <el-table-column label="司机姓名" width="120" align="center" fixed="right">
                <template slot-scope="scope">
                    <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.driverName}}</div>
                </template>
            </el-table-column>
            <el-table-column label="司机电话" width="120" align="center" fixed="right">
                <template slot-scope="scope">
                    <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.driverPhone}}</div>
                </template>
            </el-table-column>
            <el-table-column label="车牌号" width="120" align="center" fixed="right">
                <template slot-scope="scope">
                    <div :style="{color:scope.row.deliverType == '退货单' ? 'red' : '#606266'}">{{scope.row.driverCardNo}}</div>
                </template>
            </el-table-column>

         </el-table>
            <div style="text-align: center;clear: both;margin-top:20px"><!--v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 0 || orderInfo.orderState == 12 || orderInfo.orderState == 30 )"-->
                  <el-button type="primary" @click="handleConfirm" :loading="btnLoading"
                             :disabled="orderInfo.orderState == 0 && isJJWY && orderInfo.payState == 0 && orderInfo.contractUrl == ''"
                             v-if="orderInfo.isNeedMyCheck &&
                             (orderInfo.orderState == 0 || orderInfo.orderState == 12 || orderInfo.orderState == 24 || orderInfo.orderState == 30 )">
                    <el-tooltip class="item" effect="light" placement="bottom-start" v-if="orderInfo.orderState == 0 && isJJWY && orderInfo.isIntentionOrder == 1 && orderInfo.payState == 0 && orderInfo.contractUrl == ''">
                      <div>确认提交</div>
                      <div slot="content">降价违约客户生成的意向订单需要上传合同或者存在收款后销售才能首次确认!</div>
                    </el-tooltip>
                    <span v-else>确认提交</span>
                  </el-button>
                <el-button type="primary" @click="cancelOrderClick"
                           v-if="orderInfo.isNeedMyCheck && ( orderInfo.orderState == -30 || orderInfo.orderState == -24 )">
                   确认取消合同
                </el-button>
                <el-button type="primary" @click="toPrint('print',1)" v-if="(orderInfo.orderState == 40 || (orderInfo.orderState>=20 && orderInfo.isMoresuOnlineOrder==1 && orderInfo.isMoresuNeedCheck==0) )&& orderInfo.isMy == 1">普通打印</el-button>
                <el-button type="primary" @click="toPrint('print',2)" v-if="(orderInfo.orderState == 40 || (orderInfo.orderState>=20 && orderInfo.isMoresuOnlineOrder==1 && orderInfo.isMoresuNeedCheck==0) )&& orderInfo.isMy == 1">合并打印</el-button>
                <el-button type="primary" @click="toPrint('print',3)" v-if="orderInfo.unFinishedSend == 1 && orderInfo.isMy == 1">变更合同打印</el-button>
                <el-button type="primary" @click="showDialogRemark">添加备注</el-button>
                <el-button type="primary"  @click="toPrint('see',2)" v-if="orderInfo.orderState != 10 && orderInfo.isMy == 1">合同预览</el-button>
                <el-button @click="blackOrder" :loading="btnLoading1" v-if="orderInfo.isNeedMyCheck && (orderInfo.orderState == 12 || orderInfo.orderState == 24  || orderInfo.orderState == 30 )">回 退</el-button>
<!--                <el-button type="primary" @click="showDialogRemark2(0)" v-if="orderInfo.isCanInputCancelReason == 1 || inputOrderCancelReason">填写取消原因</el-button>-->
                <el-button type="primary" @click="showDialogRemark2(1)" v-if="orderInfo.isIntentionOrder == 1 && orderInfo.isNeedMyCheck && orderInfo.orderState == 0">取消意向合同</el-button>
                <el-button type="primary" @click="showDialogRemark2(0)" v-if="orderInfo.isMy && orderInfo.orderState > 0 && orderInfo.orderState != 10 && orderInfo.financeState !=2">取消正式合同</el-button>
            </div>

            <div style="margin-top: 20px;clear: both">
                <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal" @select="handleSelectLog">
                    <el-menu-item index="1">操作记录</el-menu-item>
                    <el-menu-item index="2">变更记录</el-menu-item>
                    <el-menu-item index="3">订单备注<span v-if="orderInfo.orderLogs">（{{orderInfo.orderLogs.orderLogByC.length}}）</span></el-menu-item>
                    <el-menu-item index="4">收款信息</el-menu-item>
<!--                    <el-menu-item index="5">发货信息</el-menu-item>-->
                    <el-menu-item index="6">司机信息</el-menu-item>
                    <el-menu-item index="7" v-if="orderInfo.orderState == 40 || orderInfo.orderState == 10 || (isJJWY && orderInfo.isIntentionOrder == 1)">上传合同回单</el-menu-item>
                    <el-menu-item index="8">发货延迟原因（{{fhycList.length}}）</el-menu-item>
                    <el-menu-item index="9">补充协议</el-menu-item>
                </el-menu>
            </div>
            <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
                <div v-if="logTab == 1 || logTab == 2 || logTab == 3">
                    <el-timeline>
                        <el-timeline-item
                                v-for="(activity, index) in orderLogs"
                                :key="index">
                         <span :style="{'color':activity.log_type == 1 ? 'red' : '#303133'}">
                             <span style="padding-right:10px;">{{activity.created_at}}</span>
                             {{activity.user_name}}：{{activity.content}}
                             <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                             <!--                             <span v-show="logTab == 1" style="padding-left:5px">耗时：{{activity.time_consuming}}</span>-->
                         </span>
                        </el-timeline-item>
                    </el-timeline>
                    <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderLogs.length == 0">- 暂无数据 -</div>
                </div>

                <div v-else-if="logTab == 4" style="padding-bottom:20px;">
                    <el-table
                            ref="orderItemTable"
                            :data="orderInfo.orderPayList"
                            style="width: 100%;margin-top: 20px" border>
                        <el-table-column label="收款日期" align="center">
                            <template slot-scope="scope">
                                {{scope.row.payTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="收款方式" align="center">
                            <template slot-scope="scope">
                                {{scope.row.payType}}
                            </template>
                        </el-table-column>
                        <el-table-column label="收款人" align="center">
                            <template slot-scope="scope">
                                {{scope.row.operator}}
                            </template>
                        </el-table-column>
                        <el-table-column label="收款金额" align="center">
                            <template slot-scope="scope">
                                {{scope.row.payAmount}}
                            </template>
                        </el-table-column>
                        <el-table-column label="收款凭证" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.payContent"  @click="fullImg(scope.row.payContent)" style="width:50px;height:50px;object-fit: contain"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="收款备注" align="center">
                            <template slot-scope="scope">
                                {{scope.row.remark}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else-if="logTab == 5" style="padding-bottom:20px;">
                    <el-table
                            ref="orderItemTable"
                            :data="orderInfo.orderDeliverList"
                            style="width: 100%;margin-top: 20px" border>
                        <el-table-column label="发货单" align="center">
                            <template slot-scope="scope">
                              <span @click="toDeliverCon(scope.row)" style="color:#409EFF;cursor: pointer;vertical-align: middle">
                                  {{scope.row.deliverSn}}
                             </span>
                                <img src="../../assets/images/zhuofei2.png"  style="vertical-align: middle;" v-if="scope.row.isDelete"/>
                                <img src="../../assets/images/bian.png" v-if="scope.row.isUpdate" style="vertical-align: middle;"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="发货日期" align="center">
                            <template slot-scope="scope">
                                {{scope.row.shipTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="发货数量" align="center">
                            <template slot-scope="scope">
                                {{scope.row.shipNum}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else-if="logTab == 6" style="padding-bottom:20px;">
                    <el-button type="primary" style="margin-left:10px" @click="showDetail('add')" size="small">新增</el-button>
                    <el-table
                            ref="orderItemTable"
                            :data="orderInfo.orderDriverList"
                            style="width: 100%;margin-top: 20px" border>
                        <el-table-column label="司机姓名" align="center">
                            <template slot-scope="scope">
                                {{scope.row.driverName}}
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号" align="center">
                            <template slot-scope="scope">
                                {{scope.row.driverMobile}}
                            </template>
                        </el-table-column>
                        <el-table-column label="提货数量" align="center">
                            <template slot-scope="scope">
                                {{scope.row.deliveryNum}}
                            </template>
                        </el-table-column>
                        <el-table-column label="提货日期" align="center">
                            <template slot-scope="scope">
                                {{scope.row.deliveryTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="车牌号" align="center">
                            <template slot-scope="scope">
                                {{scope.row.driverCardNo}}
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center">
                            <template slot-scope="scope">
                                {{scope.row.deliveryRemark}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="showDetail('edit',scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else-if="logTab == 7" style="padding-bottom:20px;">
                    <el-upload action="https://upload.qiniup.com"
                               drag
                               style="width:500px"
                               :http-request="sliderRequest"
                               :limit="5"
                               :on-exceed="onExceed"
                               list-type="picture"
                               :file-list="fileList"
                               :before-remove="beforeRemove"
                               :on-remove="onRemove"
                               :on-preview="preview">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                        <el-button size="small" type="primary" :disabled="fileList.length>=5">点击上传</el-button>-->
                    </el-upload>
                    <div style="font-size:12px;color:#888;padding-top:10px" v-if="fileList.length > 0 && orderInfo.contractFiles">这是一个{{orderInfo.contractFiles.extension}}文件，如下载后无法打开请加上.{{orderInfo.contractFiles.extension}}</div>
                </div>
              <div v-if="logTab == 8">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in fhycList"
                    :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.logTime}}</span>
                             {{activity.logUser}}：{{activity.logContent}}
                         </span>
                  </el-timeline-item>
                </el-timeline>
                <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="fhycList.length == 0">- 暂无数据 -</div>
              </div>
              <div v-if="logTab == 9">
                <el-link type="primary"
                         v-if="orderInfo.sideAgreementUrl != ''"
                         style="font-size:12px;padding-bottom: 20px" :href="orderInfo.sideAgreementUrl" target="_blank">
                  {{orderInfo.sideAgreementUrl}}
                </el-link>
              </div>
            </div>
        </el-card>
        <!--放大图片-->
        <el-dialog
                :visible.sync="dialogVisible4"
                width="800px">
            <img :src="fullSrc" style="width:100%;"/>
        </el-dialog>

        <!--备注-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose3"
                title="填写备注"
                :visible.sync="dialogVisible3"
                width="400px">
            <el-form :model="remarkForm" size="mini" label-width="100px"  ref="remarkForm" :rules="rules3">
                <el-form-item label="调整原因：" prop="remark">
                    <el-input v-model="remarkForm.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose3">取 消</el-button>
                <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑发货单-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose2"
                title="编辑发货单"
                :visible.sync="dialogVisible2"
                width="500px">
            <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" :rules="rules2">
                <el-form-item label="司机：" prop="driverName">
                    <el-input v-model="quitForm.driverName" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="司机手机号：" prop="driverMobile">
                    <el-input v-model="quitForm.driverMobile" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="车牌号：" prop="driverCardNo">
                    <el-input v-model="quitForm.driverCardNo" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="提货日期：" prop="deliveryTime">
                    <el-date-picker
                            v-model="quitForm.deliveryTime"
                            value-format="yyyy-MM-dd"
                            style="width:140px"
                            type="date"
                            placeholder="提货日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="提货数量：" prop="deliveryNum">
                    <el-input v-model="quitForm.deliveryNum" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="负责人：">
                    {{quitForm.driverChargeUser}}
                </el-form-item>
                <el-form-item label="备注信息：">
                    <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="quitForm.deliveryRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose2">取 消</el-button>
              <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
          </span>
        </el-dialog>

      <!--修改商品行备注-->
      <el-dialog
        :close-on-click-modal="false"
        :beforeClose="handleClose5"
        title="填写备注"
        :visible.sync="dialogVisible5"
        width="400px">
        <el-form :model="changeRemarkFrom" size="mini" label-width="100px"  ref="changeRemarkFrom" :rules="rules5">
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="changeRemarkFrom.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose5">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading6">确 定</el-button>
      </span>
      </el-dialog>


      <cancelOrder ref="cancelOrder" @update="getPageInfo"></cancelOrder>

      <!--取消合同确认/拒绝-->
      <cancelClick ref="cancelClick" @update="cancelUpdate"></cancelClick>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import axios from 'axios'
    import {getCustomerSetting, getOrdersShow,postOrdersprocess,ordersRemark,getQiniuToken,uploadOrderImg,addDriverOrder,searchLimit,getSyncOneOrder,changeOtherRemark,ordDeliverGoods,changeDetailRemark,delayReasonList} from '@/api/partner'
    import zhoufei from '@/assets/images/zhuofei.png'
    import {validateCommission} from '@/utils/validate';
    import {showtime} from '@/utils/index'
    import cancelOrder from './components/cancelOrder'
    import cancelClick from '@/views/components/cancelClick'
    import crmTag from "@/views/components/crmTag";
    const defauleQuitForm={
        driverId:0,
        orderId:'',
        driverName:'',
        driverMobile:'',
        driverCardNo:'',
        deliveryNum:'',
        deliveryRemark:'',
        deliveryTime:'',
        driverChargeUser:'',
    }
    const defauleChangeRemarkFrom={
          ogId:'',
          remark:'',
    }

    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                tableData:[],
                orderId:this.$route.query.id,
                type:this.$route.query.type,
                orderInfo:{},
                customerIndustryList: [],
                btnLoading:false,
                saleRemark:'',
                btnLoading1:false,
                rules:{
                    expectSendDate:[{required: true, trigger: 'change' ,message: '请输入期望发货日期',}],
                    urgentType:[{required: true, trigger: 'change' ,message: '请选择',}],
                    urgentRemark:[{required: true, trigger: 'blur' ,message: '请说明原因',}],
                    goodsFreight:[{required: true, trigger: 'blur' ,message: '请输入摩叔运费',}],
                    isTimeSure:[{required: true, trigger: 'change' ,message: '请选择',}],
                    timeSureDate:[{required: true, trigger: 'blur' ,message: '请输入合同约定时间',}],
                    customerBuyReason:[{required: true, trigger: 'change' ,message: '请选择',}],
                    fromBuyReason:[{required: true, trigger: 'change' ,message: '请选择',}],
                },
                zhoufei:zhoufei,
                logTab:'1',
                orderLogs:[],
                dialogVisible3:false,
                btnLoading3:false,
                remarkForm:{
                    remarkTypeStr:'',
                    remark:'',
                },
                rules3:{
                    remarkTypeStr:[{required: true, trigger: 'change' ,message: '请选择备注类型',}],
                    remark:[{required: true, trigger: 'blur' ,message: '请输入备注',}],
                },
                rules4:{
                    freight:[{required: true, trigger: 'change' ,message: '请输入摩叔运费',}],
                },
                remarkList:[],
                dialogVisible2:false,
                btnLoading2:false,
                quitForm:JSON.parse(JSON.stringify(defauleQuitForm)),
                rules2:{
                    driverName:[{required: true, trigger: 'blur' ,message: '请输入司机姓名',}],
                    driverMobile:[{required: true, trigger: 'blur' ,message: '请输入司机手机号',}],
                    driverCardNo:[{required: true, trigger: 'blur' ,message: '请输入车牌号',}],
                    deliveryNum:[{required: true, trigger: 'blur' ,validator: isvalidateCommission,}],
                    deliveryTime:[{required: true, trigger: 'change' ,message: '请选择提货日期',}],
                },
                uploadToken:{
                    token:'',
                },
                imgDomain:'',
                fullSrc:'',
                dialogVisible4:false,
                urgentTypeList:[],
                fullscreenLoading:false,
                btnLoading5:false,
                orderRemarkDisabled:true,
                deliverForm:{
                    dgList:[],
                    remark:''
                },
                fileList:[],
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    },
                },
                moresuCouponInfo:[],

                changeRemarkFrom:JSON.parse(JSON.stringify(defauleChangeRemarkFrom)),
                dialogVisible5:false,
                btnLoading6:false,
                rules5:{
                  remark:[{required: true, trigger: 'blur' ,message: '请输入备注',}],
                },
              customerBuyReasonList:[],
              fromBuyReasonList:[],
              fhycList:[],
              isJJWY:false
            }
        },
        components:{
          cancelOrder,cancelClick,crmTag,
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
            changeOrderDetailRemark(){
              if(this.roles.indexOf("changeOrderDetailRemark") != -1){
                return true
              }else{
                return false
              }
            },
            inputOrderCancelReason(){
              if(this.roles.indexOf("inputOrderCancelReason") != -1){
                return true
              }else{
                return false
              }
            },
        },
        created() {
            this.getRemarkList();
            this.getPageInfo();
            this.getCustomerSettingList();
            this.getUploadToken();
            this.getOrdDeliverGoods();
            this.getfhycList();
        },
        watch:{
            '$route'(to,from){
                this.orderId = this.$route.query.id;
                this.getRemarkList();
                this.getPageInfo();
                this.getCustomerSettingList();
            }
        },
        filters: {
            formatTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd')
            },
            filtersTime(time){
                let h = parseInt(time / 3600, 10);
                let n = parseInt((time - h * 3600) / 60, 10);
                let s = time % 60;
                let r = "";
                r = h == 0 ? r : h + "小时";
                r = (n == 0 && s == 0) ? r : r + n + "分";
                r = s ==0 ? r : r + s + "秒";
                return r;
            },
            fiFreight(val){
                let sum = 0;
                if(val){
                    val.forEach((el)=>{
                        let goodsFreight = el.goodsFreight ? el.goodsFreight : 0;
                        sum = sum + parseFloat(goodsFreight)
                    });
                    return sum.toFixed(2)
                }else{
                    return 0
                }
            },
            fifterOrderType(val){
                if(val=='normal'){
                    return '正常'
                }else if(val == 'un_sure'){
                    return '待定'
                }
            },
            fifterTimeSure(val){
                if(val == 1){
                    return '是'
                }else if(val == 2){
                    return '否'
                }
            },
            fiffinanceState (val){
                if(val == 0){
                    return '未审核'
                }else if(val == 1){
                    return '已审核 '
                }else if(val == 2){
                    return '已关闭'
                }else if(val == 3){
                  return '部分审核'
                }
            },

          fifFreightType(val){
            if(val == 'sale'){
              return '销售承担运费'
            }else if(val == 'purchase'){
              return '采购承担运费 '
            }
          },
          fiftransactionType(val){
            if(val == 'BANK_PAY'){
              return '银行汇款'
            }else if(val == 'COD_PAY'){
              return '货到付款 '
            }else if(val == 'DEPOSIT_PAY'){
              return '定金 '
            }else if(val == 'OTHER_PAY'){
              return '其它 '
            }else if(val == 'PERIOD_PAY'){
              return '账期 '
            }
          },
        },
        methods:{
          /*取消合同*/
          cancelOrderClick(){
              this.$refs.cancelClick.showPop(this.orderInfo)
          },

          //取消合同更新
          cancelUpdate(nowTime){
            this.getPageInfo();
            this.showPalceTime(nowTime)
          },

          //获取延迟原因
          getfhycList(){
            delayReasonList({orderId:this.orderId}).then((res)=>{
              this.fhycList = res;
            })

          },
          //显示备注弹窗
          showDialogRemark2(type){
              this.$refs.cancelOrder.showPop(type,this.orderId)
          },


          //显示备注修改
          showRemark(item){
              this.changeRemarkFrom.ogId = item.ogId;
              this.changeRemarkFrom.remark = item.remark;
              this.dialogVisible5 = true;
          },

          //关闭备注弹窗
          handleClose5(){
            this.dialogVisible5 = false;
            this.$refs.changeRemarkFrom.clearValidate();
          },
          //提交备注
          handleConfirm5(){
            this.$refs['changeRemarkFrom'].validate((valid) => {
              if (valid) {
                this.btnLoading6 = true;
                let data = {};
                data.detailList = [];
                data.detailList.push(this.changeRemarkFrom)
                changeDetailRemark(data).then(()=>{
                  this.btnLoading6 = false;
                  this.dialogVisible5 = false;
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.getPageInfo()
                }).catch(()=>{
                  this.btnLoading6 = false;
                })
              }
            })
          },


            //去订单详情
            toOrderDetail(item){
                let routeData = this.$router.resolve({name:'saleDetail',query:{id:item.orderId,type:'see'}});
                window.open(routeData.href);
            },

            //获取发货信息
            getOrdDeliverGoods(){
                ordDeliverGoods({orderId:this.orderId}).then((res)=>{
                    this.deliverForm.dgList = res;
                })
            },
            //去客户详情页
            toDetail(tab){
                if(tab==10){
                    this.$router.push({name:'customerDetail',query:{id:this.orderInfo.customerId,tab:tab}})
                }else{
                    this.$router.push({name:'customerDetail',query:{id:this.orderInfo.customerId}})
                }

            },
            //提交订单备注
            submitContractOtherRemark(){
                changeOtherRemark({orderId:this.orderId,contractOtherRemark:this.orderInfo.contractOtherRemark,expectPayTime:this.orderInfo.expectPayTime}).then(()=>{
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getPageInfo()
                })
            },
            //同步SAP数据
            syncOneOrder(){
                this.btnLoading5 = true;
                getSyncOneOrder({orderId:this.orderId}).then((res)=>{
                    this.$message({
                        message: '同步成功',
                        type: 'success'
                    });
                    this.btnLoading5 = false;
                    this.getPageInfo()
                }).catch(()=>{
                    this.btnLoading5 = false;
                })
            },
            //去销售合同列表-我的
            toSaleList(type){
                this.$router.push({name:'sale',query:{type:type,keywords:this.orderInfo.customerName}})
            },
            //限额判断
            isImit(item,val){
                if(val){
                    searchLimit({goodsKingId:item.goodsKingId,sendDate:val}).then((res)=>{
                        let limitNum = res.limitNum ? res.limitNum : '不限';
                        console.log(item.goodsNum)
                        if(res.limitNum && parseFloat(item.goodsNum) > parseFloat(limitNum)){
                            let msg = '此商品当日订单总量为'+res.expectSendNum+'吨，限额'+res.limitNum+'吨，你确认按当前日期发货吗？';
                            this.$alert(msg, '警告', {
                                confirmButtonText: '确定',
                            });
                        }

                    })
                }

            },
            //查看发货单
            toDeliverCon(item){
                let routeData = this.$router.resolve({name:'deliverCon',query:{id:item.deliverId,type:'see'}});
                window.open(routeData.href);
            },

            fullImg(src){
                this.dialogVisible4 = true;
                this.fullSrc = src;
            },

            //获取七牛TOKEN
            getUploadToken(){
                getQiniuToken().then((res)=>{
                    this.uploadToken.token = res.token;
                    this.imgDomain = res.domain
                })
            },
            //上传文件重写
            sliderRequest(upload) {
                // 文件上传自行处理上传
                // 创建FormData对象 添加相关上传参数
                const formData = new FormData()
                // 文件对象
                formData.append('file', upload.file)
                // key 文件名处理，这样的话七牛会识别文件时什么类型
                let timestamp=new Date().getTime();
                var result =/\.[^\.]+/.exec(upload.file.name);
                let fileName = timestamp + upload.file.name
                formData.append('key', fileName)
                // token
                formData.append('token', this.uploadToken.token)//这个postData,要在data数据里面进行定义的，，，我这里调接口使用的是vue的方式
                // 上传文件
                // onUploadProgress 查看axios文档 https://github.com/axios/axios
                axios.post("https://upload.qiniup.com", formData, {
                    onUploadProgress: (event) => {
                        // 监听上传进度
                        event.percent = event.loaded / event.total * 100
                        upload.onProgress(event)
                    }
                }).then((response) => {
                    console.log("response",response)
                    if (response.status === 200) {
                        let res = response.data;
                        console.log(this.imgDomain+res.key);
                        let newFile = this.imgDomain+res.key;
                        this.fileList.push({name:newFile,url:newFile});
                        console.log("this.fileList",this.fileList)
                        this.uploadfileList('upload');

                    }else{
                        this.handleAvatarError()
                    }
                }).catch((err) => {
                    // 调用组件上传失败方法
                    this.handleAvatarError()
                })
            },

            uploadfileList(type){
                let contractUrl = '';
                if(this.fileList.length > 0){
                    let list = [];
                    this.fileList.forEach((el)=>{
                        list.push(el.url)
                    })
                    contractUrl = list.join(",")
                }
                uploadOrderImg({orderId:this.orderId,contractUrl:contractUrl}).then((res)=>{
                    this.getPageInfo();
                    this.fullscreenLoading = false;
                    let msg = type=='del' ? '附件已删除' : '合同附件上传成功';
                    this.$message({
                        message: msg,
                        type: 'success'
                    });
                }).catch(()=>{
                    this.fullscreenLoading = false;
                })
            },

            handleChange(file, fileList) {
                this.fileList = fileList.slice(-1);
            },
            preview(file){
                window.open(file.name)
            },

            beforeRemove(file, fileList){
                return this.$confirm('确定删除图片吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(fileList);
                }).catch(() => {
                    reject(false);
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            onRemove(file, fileList){
                this.fileList = fileList
                this.uploadfileList('del');
            },
            onExceed(file, fileList){
                this.$message({
                    message: '最多上传5个附件',
                    type: 'error'
                });
            },


          //去打印机
          toPrint(isSee,type){
              let name = 'printing'
              if(this.orderInfo.transactionType == '锡商支付'){
                  name = 'printingXs'
              }
              if(isSee=='see'){
                  this.$router.push({name:name,query:{id:this.$route.query.id,type:type,isPums:'1'}})
              }else{
                  this.$router.push({name:name,query:{id:this.$route.query.id,type:type}})
              }

          },
          //编辑发货单
          showDetail(type,item){
              this.dialogVisible2 = true;
              if(type=='edit'){
                  this.quitForm.driverId = item.driverId;
                  this.quitForm.driverName = item.driverName;
                  this.quitForm.driverMobile = item.driverMobile;
                  this.quitForm.driverCardNo = item.driverCardNo;
                  this.quitForm.deliveryNum = item.deliveryNum;
                  this.quitForm.deliveryRemark = item.deliveryRemark;
                  this.quitForm.deliveryTime = item.deliveryTime;
                  this.quitForm.driverChargeUser = item.driverChargeUser;
                  this.quitForm.orderId = this.orderId;
              }else{
                  this.quitForm = JSON.parse(JSON.stringify(defauleQuitForm));
                  this.quitForm.driverChargeUser = this.name;
              }
          },
          //关闭编辑弹窗
          handleClose2(){
              this.dialogVisible2 = false;
              this.$refs.quitForm.clearValidate();
          },


            //上传图片
            handleAvatarSuccess(res){
                console.log(res)
                if(res.code == 200){
                    this.orderInfo.contractUrl= res.content.url;
                    uploadOrderImg({orderId:this.orderId,contractUrl:this.orderInfo.contractUrl}).then((res)=>{
                        this.getPageInfo();
                        this.fullscreenLoading = false;
                        this.$message({
                            message: '合同附件上传成功',
                            type: 'success'
                        });
                    }).catch(()=>{
                        this.fullscreenLoading = false;
                    })
                }else{
                    console.log("1111")
                    this.fullscreenLoading = false;
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            },
            handleAvatarError(){
                console.log("222")
                this.fullscreenLoading = false;
                this.$message({
                    message: '上传失败',
                    type: 'error'
                });
            },



            //提交编辑弹窗
            handleConfirm2(){
                this.$refs.quitForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading2 = true;
                        let data = {};
                        data.driverId = this.quitForm.driverId;
                        data.driverName = this.quitForm.driverName;
                        data.driverMobile = this.quitForm.driverMobile;
                        data.driverCardNo = this.quitForm.driverCardNo;
                        data.deliveryNum = this.quitForm.deliveryNum;
                        data.deliveryRemark = this.quitForm.deliveryRemark;
                        data.deliveryTime = this.quitForm.deliveryTime;
                        data.orderId = this.orderId;
                        addDriverOrder(data).then(()=>{
                            this.btnLoading2 = false;
                            this.handleClose2();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading2 = false;
                        })
                    }
                })
            },


            //获取备注类型
            getRemarkList(){
                getCustomerSetting().then((res) => {
                    res.forEach((el) => {
                        if (el.cdtCode == 'remark_type_str') {
                            this.remarkList = el.data
                        }
                    });
                })
            },

            //显示备注弹窗
            showDialogRemark(){
                this.dialogVisible3 = true;
                this.remarkForm.remark = '';
                this.remarkForm.remarkTypeStr = '';
            },
            //关闭备注弹窗
            handleClose3(){
                this.dialogVisible3 = false;
                this.$refs.remarkForm.clearValidate();
            },
            //提交备注
            handleConfirm3(){
                this.$refs['remarkForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading3 = true;
                        ordersRemark({orderId:this.orderId,remark:this.remarkForm.remark}).then(()=>{
                            this.btnLoading3 = false;
                            this.dialogVisible3 = false;
                            this.getPageInfo()
                        }).catch(()=>{
                            this.btnLoading3 = false;
                        })
                    }
                })
            },
            //切换log类型
            handleSelectLog(key){
                this.logTab = key;
                this.orderLogs = [];
                if(key==1){
                    this.orderLogs = this.orderInfo.orderLogs.orderLogByA
                }else if(key == 2){
                    this.orderLogs = this.orderInfo.orderLogs.orderLogByB
                }else if(key == 3){
                    this.orderLogs = this.orderInfo.orderLogs.orderLogByC
                }
            },
            //返回
            goBlack(){
                this.$router.go(-1)
            },
            //确认提交
            handleConfirm(){
                this.$refs['orderInfo'].validate((valid) => {
                    if (valid) {
                        if(this.orderInfo.orderState == 0){
                            if(this.orderInfo.isTimeSure == '' || this.orderInfo.isTimeSure == 0 ) {
                                this.$message.error('是否明确合同约定时间');
                                return false
                            }
                        }
                        let data = {};
                        data.orderId = this.orderId;
                        data.customerIndustry = this.orderInfo.customerIndustry.cdd_id;
                        data.freight = this.orderInfo.freight;
                        data.action = this.orderInfo.orderState == 0 ? 'onceEnter' : 'twiceEnter';
                        data.remark = this.saleRemark;
                        data.isTimeSure = this.orderInfo.isTimeSure;
                        data.isInvoiceNeedDetail = this.orderInfo.isInvoiceNeedDetail;
                        if(this.orderInfo.orderState == 0){
                            data.fromCompany = this.orderInfo.fromCompany;
                            data.isDefendOrder = this.orderInfo.isDefendOrder;
                            data.contractOtherRemark = this.orderInfo.contractOtherRemark;

                            data.isFactoryDeliver = this.orderInfo.isFactoryDeliver;
                            data.productionDate = this.orderInfo.productionDate;
                            data.packingRequire = this.orderInfo.packingRequire;
                            data.brokenRate = this.orderInfo.brokenRate;
                            data.isHolidayCanSend = this.orderInfo.isHolidayCanSend;
                            data.batchRequire = this.orderInfo.batchRequire;
                            data.buyerRemark = this.orderInfo.buyerRemark;

                            data.goods = [];
                            this.orderInfo.orderGoodsData.forEach((el)=>{
                                data.goods.push({
                                    ogId:el.ogId,
                                    expectSendDate:el.expectSendDate,
                                    timeSureDate: data.isTimeSure == 1 ? el.timeSureDate : '',
                                    urgentType:el.urgentType,
                                    urgentRemark:el.urgentRemark,
                                    goodsFreight:el.goodsFreight,
                                    goodsColor:el.goodsColor,
                                    customerBuyReason:el.customerBuyReason,
                                    fromBuyReason:el.fromBuyReason,
                                })
                            })
                        }
                        if(this.orderInfo.orderState == 12){
                            data = {};
                            data.orderId = this.orderId;
                            data.action = 'saleManageEnter';
                        }
                        if(this.orderInfo.orderState == 24){
                          data = {};
                          data.orderId = this.orderId;
                          data.action = 'saleManageEnter2';
                        }
                        if(this.orderInfo.orderState == 30){ //销售二次确认时，显示预估毛利提醒弹窗
                            data.goods = [];
                            this.orderInfo.orderGoodsData.forEach((el)=>{
                              data.goods.push({
                                ogId:el.ogId,
                                customerBuyReason:el.customerBuyReason,
                                fromBuyReason:el.fromBuyReason,
                              })
                            })
                          this.$confirm('<div>此合同预估毛利为<span style="color:Red;font-weight: bold;font-size:16px;padding:0 5px;">￥'+ this.orderInfo.saleProfit +'</span>，是否确认？', '提示', {
                            dangerouslyUseHTMLString: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                          }).then(() => {
                            this.btnLoading = true;
                            postOrdersprocess(data).then((res)=>{
                              this.btnLoading = false;
                              this.getPageInfo();
                              this.showPalceTime(res.nowTime)
                            }).catch(()=>{
                              this.btnLoading = false;
                            })
                          }).catch(() => {
                            this.$message({
                              type: 'info',
                              message: '已取消确认'
                            });
                          });
                        } else {
                          this.btnLoading = true;
                          postOrdersprocess(data).then((res)=>{
                            this.btnLoading = false;
                            this.getPageInfo();
                            console.log("res.nowTime",res.nowTime)
                            this.showPalceTime(res.nowTime)
                          }).catch(()=>{
                            this.btnLoading = false;
                          })
                        }
                    }
                })
            },




          //显示处理时长
          showPalceTime(nowTime){
            let oldTime = formatDate(new Date(parseInt(this.orderInfo.lastCheckTime*1000)),'MM-dd hh:mm')
            let time = formatDate(new Date(parseInt(nowTime*1000)),'MM-dd hh:mm');
            let countTime = showtime(parseInt(this.orderInfo.lastCheckTime*1000),parseInt(nowTime*1000))
            console.log("time",time)
            console.log("oldTime",oldTime)
            console.log("countTime",countTime);
            this.$alert('<div>此合同于 '+ oldTime +' 流转转您的节点</div><div style="padding:16px 0">您于 '+ time +' 处理完毕。</div><div>此合同在您的节点耗时<span style="font-size:16px;font-weight: bold;color:red;padding-left:5px">'+countTime+'</span></div>', '流转统计', {
              showConfirmButton:false,
              dangerouslyUseHTMLString: true,
              closeOnClickModal:true,
            })
            setTimeout(function() {
              let a = document.body.getElementsByClassName("v-modal")[0];
              a.click();
            }, 6000);
          },
            //回退
            blackOrder(){
                if(this.saleRemark==''){
                    this.$message.error('回退时，操作备注必需填写！');
                    return false
                }
                this.btnLoading1 = true;
                let data = {};
                data.orderId = this.orderId;
                data.action = 'back';
                data.remark = this.saleRemark;
                postOrdersprocess(data).then((res)=>{
                    this.btnLoading1 = false;
                    this.$message({
                        message: '合同已回退成功',
                        type: 'success'
                    });
                    this.getPageInfo();

                    console.log("res.nowTime",res.nowTime)
                    this.showPalceTime(res.nowTime)
                }).catch(()=>{
                    this.btnLoading1 = false;
                })

            },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                getOrdersShow({orderId:this.orderId}).then(res=>{
                    this.orderInfo = res;
                    this.isJJWY = 0;
                    let customerTagList = res.customerTag.map(item=>item.tagName)
                    this.isJJWY = customerTagList.includes('降价违约')
                    this.handleSelectLog(this.logTab);
                    this.fileList = [];
                    if(this.orderInfo.contractUrl != ''){
                        let contractUrl = this.orderInfo.contractUrl.split(",");
                        contractUrl.forEach((el)=>{
                            this.fileList.push({name:el,url:el})
                        })
                    };
                    this.moresuCouponInfo = [];
                    if(this.orderInfo.moresuCouponInfo != null){
                        this.moresuCouponInfo.push(this.orderInfo.moresuCouponInfo);
                    }
                    this.loading = false;
                });
            },


            //获取客户配置
            getCustomerSettingList() {
                getCustomerSetting().then((res) => {
                    res.forEach((el) => {
                        if (el.cdtCode == 'customer_industry') {
                            this.customerIndustryList = el.data;
                        }else if(el.cdtCode == 'urgent_type') {
                            this.urgentTypeList = el.data
                        }else if(el.cdtCode == 'customer_buy_reason') {
                          this.customerBuyReasonList = el.data
                        }else if(el.cdtCode == 'from_buy_reason') {
                          this.fromBuyReasonList = el.data
                        }
                    });
                })
            },
        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    .minRoW .el-form-item{
        margin-bottom:5px;
    }
    .red-form{
        .el-form-item__label{
            color:red
        }
    }
    .tongJitable{
        border-left:1px solid #EBEEF5;
        border-top:1px solid #EBEEF5;
        font-size:12px;
        margin-bottom:20px;
        td{
            border-right:1px solid #EBEEF5;
            border-bottom:1px solid #EBEEF5;
            div.tddiv{
                min-height: 30px;
                line-height: 30px;
                padding:0 5px;
                text-align: center;
                white-space:  nowrap
            }
        }
        .bgtd{
            background: #f5f7fa;
        }
    }

    .title-tab{
        border-radius: 8px;
        background: #eee;
        margin-left: 10px;
        display: inline-block;
        vertical-align: middle;
        line-height: 20px;
        padding: 0 5px;
        color: #666;
    }
    .blurth{
        background:#e21717;
        color:#fff
    }
</style>
